<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="./layui/css/layui.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <script src="./layui/layui.js" charset="utf-8"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>大家的评论</title>

  <!-- load CSS -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">        <!-- Google web font "Open Sans" -->
  <link rel="stylesheet" href="css/bootstrap.min.css">                                            <!-- https://getbootstrap.com/ -->
  <link rel="stylesheet" href="css/fontawesome-all.min.css">                                      <!-- Font awesome -->
  <link rel="stylesheet" href="css/tooplate-style.css">
  <!-- Meta tag Keywords -->


  <meta name="keywords" content="" />
  <script>
      addEventListener("load", function () {
          setTimeout(hideURLbar, 0);
      }, false);

      function hideURLbar() {
          window.scrollTo(0, 1);
      }
  </script>
  <!-- //Meta tag Keywords -->
  <!-- Custom-Files -->
  <link rel="stylesheet" href="css/bootstrap.css">
  <!-- Bootstrap-Core-CSS -->
  <link href="css/css_slider.css" type="text/css" rel="stylesheet" media="all">
  <!-- banner slider -->
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
  <!-- Style-CSS -->
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <!-- Font-Awesome-Icons-CSS -->
  <!-- //Custom-Files -->
  <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <!-- Web-Fonts -->
  <link href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i" rel="stylesheet">
  <link href="http://fonts.googleapis.com/css?family=Oxygen:300,400,700&amp;subset=latin-ext" rel="stylesheet">
  <!-- //Web-Fonts -->
  <script>
      var renderPage = true;

      if (navigator.userAgent.indexOf('MSIE') !== -1
          || navigator.appVersion.indexOf('Trident/') > 0) {
          /* Microsoft Internet Explorer detected in. */
          alert("Please view this in a modern browser such as Chrome or Microsoft Edge.");
          renderPage = false;
      }
  </script>


</head>

<body>

<!-- main banner -->
<div class="main-top" id="home">
  <!-- header -->
  <header>
    <div class="container-fluid">
      <div class="header d-md-flex justify-content-between align-items-center py-3 px-xl-5 px-lg-3 px-2">
        <!-- logo -->
        <div id="logo">
          <h1><a href="index.html">Elvis</a></h1>
        </div>
        <!-- //logo -->
        <!-- nav -->
        <div class="nav_w3ls">
          <nav>
            <label for="drop" class="toggle">Menu</label>
            <input type="checkbox" id="drop" />
            <ul class="menu">
              <li><a href="index.html" class="active">首页</a></li>
              <li><a href="about.html">关于我们</a></li>
              <li><a href="brand.html?bcategory=all">所有品牌</a></li>
              <li><a href="contact.html">联系我们</a></li>
            </ul>
          </nav>
        </div>
        <!-- //nav -->
      </div>
    </div>
  </header>
  <!-- //header -->



  <!-- banner -->
  <div class="banner_w3lspvt-2">

  </div>
  <!-- //banner -->
</div>
<!-- //main banner -->
<!-- page details -->
<div class="breadcrumb-mobamu">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="index.html">首页</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">大家的评论</li>
  </ol>
</div>
<!-- //page details -->


  <div class="tm-container">
    <div class="tm-container-inner">

      <section class="tm-text-section">
        <div class="tm-timelines">
          <h2 class="tm-text-green mb-5">大家的评论</h2>
          <div id="time1" class="tm-timelines-inner">
            <div class="tm-timeline-white-bar"></div>
            <div class="tm-timeline-circle"></div>

          </div>
        </div>

      </section>
      <section class="tm-third-section">

      </section>
      <section class="tm-text-section tm-text-section-pad-2">
        <div class="container">
          <div class="row mb-md-4 mb-sm-3">
            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center">
              <h2 class="mb-4 tm-text-blue">大胆的写下你自己的评论吧！</h2>
              <p>了解了别人的评论，你是不是也想写下你自己的评论呢</p>
            </div>
          </div>

          <div class="row tm-space-even">
          </div>
        </div>
      </section>
      <section class="tm-fifth-section">
        <div class="container">
          <div class="row">
            <h3 class="tm-text-green mb-5">写下你的评论</h3>
          </div>
          <div class="row mb-5">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 mb-sm-4 mb-md-0 mb-4">
              <form class="layui-form" action="" name="form11" id="form11">
                <div class="layui-form-item">
                  <div class="row">
                    <div class="col-lg-6 form-group">
                      <input type="text" id="user" name="user" class="form-control" placeholder="你的名字" required/>
                    </div>
                    <div class="col-lg-6 form-group">
                      <input type="text" id="bname" name="bname" class="form-control" placeholder="你想评论的品牌" required/>
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="row">
                    <div class="col-lg-6 form-group">
                     <a style="font-family:font-family;font-size:18px;">星级&nbsp&nbsp</a>
                      <div  id="test33"></div>
                      <input id="number" name="star" type="text" value="" class="satisfaction" style="display: none">

                    </div>
                    <div class="col-lg-6 form-group">
                      <textarea rows="5" id="comment" name="comment" class="form-control" placeholder="你的评论" required></textarea>
                    </div>
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button lay-submit class="btn submit mt-3" lay-filter="formDemo">提交</button>
                  </div>
                </div>
              </form>
            </div>

          </div>
          <footer class="row tm-text-white">

          </footer>
        </div>
      </section>
    </div>
  </div>

  <!--时间轴 JS -->
  <script>

      layui.use(['element'], function(){
          var $ = layui.$;

          $.ajax({
              url:'/comment/show',
              type:'get',
              success:function(map) {
                  var str="";
                  var huifu="";
                  for(var i=0;i<map.count-1;i++)
                  {
                      if(map.data[i].reply===""){
                          huifu=""
                      }
                      else {
                         huifu="<h5 class=\'mt-0 tm-text-blue\'><br>回复:<br></h5>"
                      }
                      str+=
                          "<div class=\"tm-timeline mb-4 tm-third-timeline\">" +
                          " <div class=\"media tm-media\">" +
                          " <div class=\"tm-timeline-img-wrap mr-4\">" +
                          " <img class=\"tm-media-img tm-media-img-ml-1\" src='"+map.data[i].blogo+"' alt=\"Image 1\">" +
                          "</div>" +
                          "<div class=\"media-body tm-media-body tm-media-body-ml-1\">" +
                          "<h5 class=\"mt-0 tm-text-green\">"+map.data[i].user+"</h5>"
                          +map.data[i].comment + huifu+ map.data[i].reply +
                         "</div>" +
                          "</div>" +
                          "</div>";

                  }
                  $("#time1").append(str);

              }
          });
      });

 </script>

<!-- 尾 -->
<footer class="py-5">
  <div class="container pt-xl-4">
    <div class="row footer-top">
      <div class="col-lg-4 col-md-6 footer-grid_section_1its">
        <h2 class="logo-2 mb-lg-4 mb-3">
          <a href="index.html" class="text-uppercase text-wh">Elvis</a>
        </h2>
        <!-- Map -->
        <div class="map-fo">
          <iframe src=""></iframe>
        </div>
        <!-- //Map -->
      </div>
      <div class="col-lg-2 col-md-6 footer-grid_section_1its mt-md-0 mt-4">
        <h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">链接</h3>
        <ul class="list-unstyled">
          <li class="mb-3">
            <a href="index.html">首页</a>
          </li>
          <li class="mb-3">
            <a href="about.html">关于我们</a>
          </li>
          <li class="mb-3">
            <a href="brand.html?bcategory=4">所有品牌</a>
          </li>
          <li class="mb-3">
            <a href="#services">热度最高</a>
          </li>
          <li class="mb-3">
            <a href="contact.html">联系我们</a>
          </li>
        </ul>
      </div>
      <div class="col-lg-3 col-md-6 footer-grid_section_1its mt-lg-0 mt-4">
        <h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">联系方式</h3>
        <div class="contact-info">
          <div class="footer-style-w3ls mb-4">
            <h4 class="text-li mb-2">联系电话</h4>
            <p>+121 098 8907 9987</p>
          </div>
          <div class="footer-style-w3ls mb-4">
            <h4 class="text-li mb-2">联系邮箱 </h4>
            <p><a href="mailto:info@example.com">info@example.com</a></p>
          </div>
          <div class="footer-style-w3ls mb-4">
            <h4 class="text-li mb-2">联系地址</h4>
            <p>Honey Avenue, New York City</p>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 footer-grid_section_1its mt-lg-0 mt-4">
        <!-- social icons -->
        <div class="mobamuinfo_social_icons">
          <h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">感谢使用</h3>
          <p>我们是一个公益品牌宣传网站，还在建设中，有什么不周之处敬请谅解！</p>

        </div>
        <!-- social icons -->
      </div>
    </div>
  </div>
</footer>
<!-- //footer -->
<!-- copyright -->
<div class="cpy-right text-center py-3">
  <p>Copyright &copy; 2019.Company name All rights reserved </a></p>
</div>
<!-- //copyright -->
<!--开启星星-->
<script>
    layui.use(['rate','jquery'], function() {
        var rate = layui.rate;
        $ = layui.jquery;
        rate.render({
            elem: '#test33'
            , value: 0 //初始值
            , half: true //开启半星

            ,setText:function(value){
                var arrs = {
                };
                this.span.text(arrs[value]);
                $("#number").val(value);
            }
        })

    });
</script>
<!--提交表单-->
<script>
	layui.use(['upload', 'layer','form'], function() {
		var table = layui.table;
		var $ = layui.$;
		var form = layui.form;
		var $ = layui.jquery
			, upload = layui.upload
			, layer = layui.layer;
		form.on('submit(formDemo)', function (data) {
			$.ajax({
				url: "/comment/addContactByBname"
				, type: "post"
				, data: data.field
				, success: function (d) {
					if (d === 1) {
						layer.msg('添加已成功！！！', {
							icon: 1,
							time: 1500 //2秒关闭（如果不配置，默认是3秒）
						}, function () {
						});
					}else if(d === 0){
						layer.msg('请输入正确的品牌名！！！', {
							icon: 1,
							time: 1500 //2秒关闭（如果不配置，默认是3秒）
						}, function () {
						});
                    }
				}
			});
			return false;
		});
	});
</script>
</body>
</html>
